<template>
  <view class="content">
    <view class="g-header">
    </view>
    <view class="innerPre">
    </view>
    <view class="inner">

      <view class="pay1">
        <view class="pay11">支付剩余时间：</view>
        <view class="pay12">29:59</view>
      </view>

      <view class="payPrice">
        ¥1940.00
      </view>


      <view class="payContent">
        <view class="payContentTabList">
          <view class="payContentTabLi" @click="tabIndex = 0" :class="{payContentTabLiActive:tabIndex === 0}">
            <view class="tabLiContent">线上支付</view>
          </view>
          <view class="payContentTabLi" @click="tabIndex = 1" :class="{payContentTabLiActive:tabIndex === 1}">
            <view class="tabLiContent">对公支付</view>
          </view>
        </view>
        <view class="payContent0" v-if="tabIndex === 0">
          <view class="pay0List">
            <view class="pay0Li" v-for="(n,i) in options1" :key="i" @click="options1select(n,i)">
              <view class="pay0LiIcon"></view>
              <view class="pay0LiText">{{ n.label }}</view>
              <view class="pay0LiSelect" :class="{pay0LiSelectActive: options1index === i}"></view>
            </view>
          </view>
        </view>
        <view class="payContent1" v-if="tabIndex === 1">
          <view class="pay1List">
            <view class="pay1Li">
              <view class="pay1LiTextLabel">户名：</view>
              <view class="pay1LiTextValue">深圳鲜泉科技有限公司</view>
            </view>
            <view class="pay1Li">
              <view class="pay1LiTextLabel">账号：</view>
              <view class="pay1LiTextValue">深圳鲜泉科技有限公司</view>
            </view>
            <view class="pay1Li">
              <view class="pay1LiTextLabel">开户行：</view>
              <view class="pay1LiTextValue">深圳鲜泉科技有限公司</view>
            </view>
            <view class="pay1Li">
              <view class="pay1LiTextLabel">联行号：</view>
              <view class="pay1LiTextValue">深圳鲜泉科技有限公司</view>
            </view>
            <view class="pay1Li">
              <view class="pay1LiTextLabel">汇付识别码：</view>
              <view class="pay1LiTextValue">深圳鲜泉科技有限公司</view>
            </view>
          </view>


        </view>
      </view>

      <view class="tipInfo" v-if="tabIndex === 1">
        <view class="tipIcon"></view>
        <view class="tipText">移动端仅支持线下转账，线上转账请在web端操作。</view>
      </view>

    </view>
    <view class="innerNext">
    </view>
  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

export default {
  components: {},
  data(){
    return {
      title: 'Hello',
      list: [],
      tabIndex: 0,

      options1: [
        { label: '数字人民币', value: 0, icon: 'pay0LiIcon0' },
        { label: '微信支付', value: 1, icon: 'pay0LiIcon1' },
        { label: '支付宝', value: 2, icon: 'pay0LiIcon2' },
        { label: '银联云闪付', value: 3, icon: 'pay0LiIcon3' },
      ],
      options1index: 0,
    }
  },
  onLoad(){
    this.id = this.$Route.query.id
    console.log(`this.id`, this.id)
  },
  onShow(){},
  mounted(){},
  onReady(){},
  methods: {
    options1select(n, i){
      this.options1index = i
    },

  },
}
</script>
<style lang="scss">
page {
  background-color: #F5F5F5;
}

.innerPre {

}

.inner {
  padding: 24px;
}

.innerNext {

}

.pay1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;

  .pay11 {
    font-size: 28px;
    font-family: -328080,;
    font-weight: normal;
    color: #262626;
    line-height: 48px;
  }

  .pay12 {
    color: #FF4F4F;
  }
}


.payPrice {

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 32px;
  font-weight: 600;
  color: #000000;
  line-height: 72px;

  padding-bottom: 50px;
}

.payContent {
  background: #FFFFFF;
  border-radius: 16px 0px 0px 0px;
}

.payContentTabList {

  display: flex;
  align-items: center;
  .payContentTabLi {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    background: #FAFAFA;
    padding: 30px 0;
    .tabLiContent {
      border-bottom: 4px solid transparent;
      padding-bottom: 20px;
    }
  }
  .payContentTabLiActive {
    background: #FFFFFF;
    .tabLiContent {
      border-bottom: 4px solid #177FFF;
    }
  }


}


.payContent0 {

  .pay0List {
    .pay0Li {
      display: flex;
      align-items: center;

      padding: 20px 50px;

      .pay0LiIcon {
        width: 48px;
        height: 48px;

        background-image: url(#{$bgPath}/icon_more.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;

      }
      .pay0LiIcon0 {

      }
      .pay0LiIcon1 {

      }
      .pay0LiIcon2 {

      }
      .pay0LiIcon3 {

      }
      .pay0LiText {
        margin-left: 20px;

      }

      .pay0LiSelect {
        width: 48px;
        height: 48px;

        background-image: url(#{$bgPath}/icon_more.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;

        margin-left: auto;
      }
      .pay0LiSelectActive {
        background-image: url(#{$bgPath}/icon_more.png);
      }
    }
  }
}


.payContent1 {
  .pay1List {
    .pay1Li {
      padding: 20px 50px;
      display: flex;
      align-items: center;
      .pay1LiTextLabel {
        font-size: 28px;
        color: #8C8C8C;
      }

      .pay1LiTextValue {
        color: #262626;
      }
    }
  }
}

.tipInfo {
  background: #FFEBEA;
  border-radius: 8px 8px 8px 8px;

  margin-top: 20px;

  padding: 20px;

  display: flex;
  align-items: center;
  .tipIcon {
    width: 32px;
    height: 32px;
    background: #FF3B30;
    opacity: 1;
  }
  .tipText {
    font-size: 24px;
    font-weight: normal;
    color: #262626;
    line-height: 44px;
  }
}
</style>
